<template>
	<view >
		<!-- BarTitle -->
		<home-barTittle :title="title" :showBack="false"></home-barTittle>
		
		<!-- Banner -->
		<home-banner :banners="banners"></home-banner>
		
		<!-- 通知 -->
		<home-notice :data="noticeList"></home-notice>
	
		<!-- 活动分类 -->
		<home-activityType :data="activityTypes"></home-activityType>
		
		<!-- 热门推荐 -->
		<home-popular :data="activityList"></home-popular>
		
		<!-- 精品课程 -->
		<home-course :data="courseList"></home-course>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				navLock: false,
				title:'少儿启智营',
				banners: [],
				noticeList: [],
				activityTypes: [],
				activityList: [],
				courseList: [],
				showdyxx: true,
				dataconfig: [],
				datainfo: [],
				dataindex: [],
				mbgColor: this.$mbgColor,
			}
		},
		computed: {

		},
		onPageScroll(e) {
			if (e.scrollTop > 44) {
				if (this.navLock == false) {
					this.navLock = true;
					uni.setNavigationBarColor({
						frontColor: "#000000",
						backgroundColor: "#FFFFFF",
						complete: () => {
							this.navLock = false;
						}
					});
				}
			} else {
				if (this.navLock == false) {
					this.navLock = true;
					let this_ = this
					uni.setNavigationBarColor({
						frontColor: "#ffffff",
						backgroundColor: this_.mbgColor,
						complete: () => {
							this.navLock = false;
						}
					});
				}
			}
		},
		onShareAppMessage(e) {

		},
		onShareTimeline(e) {

		},
		onLoad(e) {

			//this.getList();
		},
		onShow() {
			this.getBannerList();
			this.getNoticeList();
			this.getActivityTypes();
			this.getPopularActivityList();
			this.getCourseList();
			let this_ = this

		},
		methods: {
			// banner列表
			getBannerList() {
				let this_ = this
				let data = {};
				
				uni.request({
					url: this.configs.webUrl + '/miniapp/banner/list',
					data: data,
					success: data => {
						console.log("banners")
						console.log(data.data)
						
						this.banners = data.data.rows
					
					},
					fail: (data, code) => {}
				});
			},
			// notice列表
			getNoticeList() {
				let this_ = this
				let data = {};
				var limit = 3;
				data.pageSize = limit
				uni.request({
					url: this.configs.webUrl + '/miniapp/notice/list',
					data: data,
					success: data => {
						console.log("notice")
						console.log(data.data)
						
						this.noticeList = data.data.rows
					
					},
					fail: (data, code) => {}
				});
			},
			
			// 活动类型
			getActivityTypes() {
				let data = {};
				var limit = 3;
				data.pageSize = limit
				uni.request({
					url: this.configs.webUrl + '/miniapp/activitytype/list',
					data: data,
					success: data => {
						console.log("types")
						console.log(data.data)
						if (data.data.total > 0) {
							this.activityTypes = data.data.rows
						}
					},
					fail: (data, code) => {}
				});
			},
			// 热门推荐活动列表
			getPopularActivityList() {
				// let this_ = this
				let data = {};
				// var limit = 3;
				// data.pageSize = limit
				data.isPopular = 'Y'
				uni.request({
					url: this.configs.webUrl + '/miniapp/activity/list',
					data: data,
					success: data => {
						console.log("activityList")
						console.log(data.data)
						if (data.data.total > 0) {
							this.activityList = data.data.rows
						}
					},
					fail: (data, code) => {}
				});
			},
			// 精品课程列表
			getCourseList() {
				// let this_ = this
				let data = {};
				var limit = 3;
				data.pageSize = limit
				uni.request({
					url: this.configs.webUrl + '/miniapp/course/list',
					data: data,
					success: data => {
						console.log("courseList")
						console.log(data.data)
						if (data.data.total > 0) {
							this.courseList = data.data.rows
						}
					},
					fail: (data, code) => {}
				});
			},
			detail(id) {
				uni.navigateTo({
					url: '/sub_pages/activity/info?id=' + id
				})
			},
			linkTo(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let link = e.currentTarget.dataset.link;
					uni.navigateTo({
						url: link
					})
				}
			},

			exchange(e) {
				if (this.isLogin == false) {
					this.showLogin = true;
				} else {
					let id = e.currentTarget.dataset.id;
					uni.navigateTo({
						url: '/pages/client/integral/exchange?id=' + id
					})
				}
			},
		},
	}
</script>

<style>
	.home-header {
		height: 500rpx;
		width: 100%;
		position: relative;
		border-radius: 0rpx 0rpx 48rpx 48rpx;
	}

	.home-main {
		width: 100%;
		position: relative;
		margin-top: -156rpx;
		padding: 0 30rpx;
	}

	.home-mendian {
		width: 100%;
		height: 84rpx;
		background: rgba(208, 208, 208, 0.5);
		border-radius: 42rpx;
	}

	.integral-mall-header {
		position: relative;
		height: 320rpx;
	}

	.integral-mall-header .bg {
		width: 100%;
		height: 320rpx;
	}

	.integral-mall-header .main {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 320rpx;
	}

	.swiper-integral {
		height: 32rpx;
		width: 100%;
	}

	.integral-mall-main {
		position: relative;
		/* margin-top: -104rpx; */
	}

	.integal-mall-menu {
		width: 100%;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.integral-tuan-l {
		width: 240rpx;
		height: 180rpx;
		background: #f2f2f2;
		border-radius: 16rpx;
	}


	.integral-mall-coupon {
		height: 408rpx;
		width: 330rpx;
		background: #FFFFFF;
		position: relative;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.integral-mall-coupon .top {
		padding: 0rpx 0rpx 24rpx 0rpx;
		border-bottom: 2rpx dashed #FEC675;
	}

	.integral-mall-coupon .y-l,
	.integral-mall-coupon .y-r {
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background: #F5F6FA;
		position: absolute;
		z-index: 2;
		top: 284rpx;
	}

	.integral-mall-coupon .y-l {
		left: -10rpx;
	}

	.integral-mall-coupon .y-r {
		right: -10rpx;
	}

	.integral-mall-coupon .coupon-value {
		width: 100%;
		height: 250rpx;
		position: relative;
	}

	.integral-mall-coupon .coupon-value image {
		width: 100%;
		height: 180rpx;
	}

	.integral-mall-coupon .coupon-value .num {
		width: 100%;
		height: 64rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
	}

	.integral-mall-goods {
		width: 100%;
		height: 200rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.titleNview-placing {
		height: var(--status-bar-height);
		padding-top: 44px;
		box-sizing: content-box;
	}
</style>